<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>通讯录管理</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>

	<body>
		<div class="container">
            <br>
            <input id="btnLoad" type="button" class="btn btn-primary" value="加载联系人列表">
            <input id="btnClear" type="button" class="btn btn-danger" value="清空联系人列表">
            <hr>
			<table class="table table-bordered table-hover table-striped">
				<thead>
				<tr class="success">
					<th>编号</th>
					<th>姓名</th>
					<th>电话</th>
					<th>邮箱</th>
					<th>生日</th>
				</tr>
				</thead>
				<tbody id="contacts">

				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		$("#btnLoad").click(function () {
			//后台访问Servlet得到联系人
			$.get({
				url:"list", //访问服务器地址
				//正常响应的回调函数，contacts参数就是服务器返回的数据
				success: function (contacts) {
					//contacts是一个数组
					//进行字符串拼接
					let str = "";
					for (let contact of contacts) {
						//每一行创建一个tr
						str += "<tr><td>" + contact.id + "</td><td>" + contact.name + "</td><td>" +
								contact.phone + "</td><td>" + contact.email + "</td><td>" + contact.birthday + "</td></tr>";
					}
					$("#contacts").html(str);
				}
			});
		});

		$("#btnClear").click(function () {
			//清空所有子元素
			$("#contacts").empty();
		});
	</script>
</html>